<!--
 * @Author: ChunLai
 * @Date: 2022-05-24 11:15:20
 * @LastEditTime: 2025-08-07 20:05:31
 * @Description: 固定首行和首列 - 表格
 * @FilePath: \02.bldinsure\src\components\StickTable.vue
-->
<template>
  <div class="stick-table-module">
    <div class="stick-table">
      <div class="stick-table-table">
        <div class="sticky-table-row">
          <div
            class="sticky-table-cell ft12"
            v-for="(item, index) in eleOrderInResult"
            :key="`row-head-${index}`"
          >
            <div class="cont">{{ item.label }}</div>
          </div>
        </div>
        <div
          class="sticky-table-row"
          v-for="(list, index) in lists"
          :key="`table-list-${index}`"
        >
          <div
            class="sticky-table-cell"
            v-for="(item, idx) in eleOrderInResult"
            :key="`cell-${idx}`"
          >
            <div class="cont">
              <!-- {{ list[item.value] ? list[item.value === 'name' ? item.value: `${item.value}Desc`] : "-" }} -->
              {{ list[item.value] | formatFieldName(item.value, list) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import filters from '@/utils/filters';
export default {
  name: 'StickTable',
  data() {
    return {
      eleOrderInResult: [
        {
          label: '投保险种',
          value: 'productName',
        },
        {
          label: '保额',
          value: 'amnt',
        },
        {
          label: '保险期间',
          value: 'insuYear',
        },
        {
          label: '缴费期间',
          value: 'payendyear',
        },
        {
          label: '首年保费',
          value: 'prem',
        },
        {
          label: '中症及特定疾病保障',
          value: 'extra1',
        },
        {
          label: '身故或全残保险金',
          value: 'extra2',
        },
        {
          label: '特定心脑血管额外保障',
          value: 'extra3',
        },
        {
          label: '重度恶性肿瘤额外保障',
          value: 'extra4',
        },
      ],
      lists: [
        {
          productName: '华富乐高重大疾病保险（互联网专属）',
          amnt: '300000',
          insuYear: '106',
          insuYearType: 'Y',
          payendyear: '30',
          prem: '3261',
          extra1: '1',
          extra2: '0',
          extra3: '1',
          extra4: '0',
        },
        {
          productName: '华富乐高重大疾病保险（互联网专属）',
          amnt: '300000',
          insuYear: '106',
          insuYearType: 'Y',
          payendyear: '30',
          prem: '3261',
          extra1: '1',
          extra2: '0',
          extra3: '1',
          extra4: '0',
        },
      ],
    };
  },
  components: {},
  filters: {
    formatFieldName(value, key, objVal) {
      // console.log(key, objVal)
      if (key === 'amnt') {
        return filters.riskAmntFormat(value);
      } else if (key === 'payendyear') {
        return filters.payendYearName(value);
      } else if (key === 'insuYear') {
        return filters.insureYearName(value, objVal.insuYearType);
      } else if (key.indexOf('extra') !== -1) {
        return value === '1' ? '投保' : '不投保';
      } else {
        return value;
      }
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.stick-table-module {
  width: 100%;
  border: 1px solid rgb(229, 229, 229);

  .stick-table {
    position: relative;
    overflow: auto;
    // max-height: 200px;

    .stick-table-table {
      display: table;
      min-width: 100%;

      .sticky-table-row {
        display: table-row;

        &:nth-child(-n + 1) {
          .sticky-table-cell {
            position: sticky;
            top: 0px;
            z-index: 2;
          }
        }

        .sticky-table-cell {
          display: table-cell;
          padding: 4px;
          vertical-align: middle;
          background-color: #ffffff;

          .cont {
            display: flex;
            width: 70px;
            // height: 100%;
            align-items: center;
            justify-content: center;
          }

          &:nth-child(-n + 1) {
            position: sticky;
            left: 0px;
            z-index: 2;
          }

          &:first-child {
            .cont {
              width: 120px;
              font-size: 12px;
            }

            background-color: #f6f6f6;
          }

          &:not(:last-child) {
            border-right: 1px solid rgb(229, 229, 229);
          }
        }

        &:first-child {
          .sticky-table-cell {
            background-color: #f6f6f6;
          }
        }

        &:not(:last-child) {
          .sticky-table-cell {
            border-bottom: 2px solid rgb(229, 229, 229);
          }
        }

        &:nth-child(-n + 1) {
          .sticky-table-cell {
            &:nth-child(-n + 1) {
              z-index: 3;
            }
          }
        }
      }
    }
  }
}
</style>
